<% question = form.object %>

<div class="card questionnaire-question" id="<%= id %>-field">
  <div class="card-divider">
    <h2 class="card-title flex items-center">
    <span>
      <% if editable %>
        <%== icon("drag-move-2-fill") %>
      <% end %>
      <%= dynamic_title(t(".separator"), class: "question-title-statement", max_length: 50, omission: "...", placeholder: t(".separator")) %>
    </span>

      <div class="flex flex-row-reverse items-center gap-x-4 ml-auto">
        <% if editable %>
          <button class="button button__xs button__transparent button__transparent-secondary small alert remove-question button--title">
            <%= icon("delete-bin-line") %>
            <span class="hidden md:block"><%= t(".remove") %></span>
          </button>
        <% end %>
      </div>
    </h2>

    <%=
      form.hidden_field(
        :question_type,
        value: :separator
      )
    %>
    <% if question.persisted? %>
      <%= form.hidden_field :id, disabled: !editable %>
    <% end %>

    <%= form.hidden_field :position, value: question.position || 0, disabled: !editable %>
    <%= form.hidden_field :deleted, disabled: !editable %>
  </div>
</div>
